import MyIcon from '@/components/MyIcon';
import { Empty, List } from 'antd';
import pageStyles from '@/common/pageLayout.less';
import { useState } from 'react';
import { ContractWarnDetailModal } from './ContractWarnDetailModal';

export const ContractWarnTabsPane: React.FC<ContractWarnsHomePageAPI.IContractWarnTabsPane> = ({
  styleClassName,
  contractInfoList,
  reloadManage,
  curRes,
  tabPaneKey,
  handleClick,
}) => {
  /** 查看详情页面  */
  const [detailModalState, setDetailModalState] = useState<Record<string, any>>({
    isShowModal: false,
    checkRowsInfo: {},
  });

  /** 点击跳转 */
  const onHandleSkip = (resObj: Record<string, any>) => {
    setDetailModalState({
      isShowModal: true,
      checkRowsInfo: resObj,
    });
    handleClick();
  };

  /**
   * 处理已读颜色
   */
  const readFlagColor = (item: Record<string, any>) => {
    let color: any = '';
    let text: any = '';
    if (item?.readFlag == 0) {
      color = '30px solid red';
      text = 'NEW';
    }
    return (
      <>
        <span className={`${styleClassName}-picon`} style={{ borderTop: color }}></span>
        <span className={`${styleClassName}-pimg`}>{text}</span>
      </>
    );
  };

  return (
    <>
      <div className="commonTabsBodyDom" style={{ padding: '5px 0px' }}>
        {contractInfoList && contractInfoList?.length > 0 ? (
          <div style={{ padding: '0px 5px' }}>
            <List
              itemLayout="horizontal"
              dataSource={contractInfoList}
              className={`${styleClassName}-homeListSty`}
              renderItem={(item, index) => {
                return (
                  <List.Item
                    onClick={() => {
                      onHandleSkip(item);
                    }}
                  >
                    <List.Item.Meta
                      avatar={
                        <div>
                          <MyIcon type="icon-yujing" style={{ fontSize: '40px' }} />
                        </div>
                      }
                      title={
                        <div
                        // className={`${styleClassName}-homeListSty-titleDiv`}
                        >
                          <div className={pageStyles['over-flow-hidden']}>{item?.handleInfo}</div>
                          {/* style={{ marginLeft: '10px', marginTop: '20px', fontSize: '12px' }} */}
                          <div>{item.handleTime}</div>
                          {readFlagColor(item)}
                        </div>
                      }
                    />
                    {readFlagColor(item)}
                  </List.Item>
                );
              }}
            />
          </div>
        ) : (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        )}
      </div>

      {/* 详情弹框 */}
      {detailModalState?.isShowModal && (
        <ContractWarnDetailModal
          onClose={() => {
            setDetailModalState({
              isShowModal: false,
              checkRowsInfo: {},
            });
          }}
          checkRowsInfo={detailModalState?.checkRowsInfo}
          reloadManage={reloadManage}
          curRes={curRes}
          handleStyle={tabPaneKey}
        />
      )}
    </>
  );
};
